{% extends "@CoreBundle/layout/pop.html.twig" %}

{% block body_custom_javascript %}
    <script>
        $(function(){

            $('.select2').select2({"size":"mini","allowClear":true});

            $("input[data-bootstrap-switch]").each(function(){
                $(this).bootstrapSwitch('state', $(this).prop('checked'));
            });

            var selectPId = $("input[name='parentIdSelect']").val();
            $("select[name='parent_id']").val(selectPId).trigger("change");

            var selectUri = $("input[name='uriSelect']").val();
            $("select[name='uri']").val(selectUri).trigger("change");

    var font_element = $('#icon').fontIconPicker({
        theme: 'fip-bootstrap'
    });
    
    $.ajax({
        url: '/bundles/eduxpluscore/js/fontIconPicker/fontjson/materialdesignicons_v4.json',
        type: 'GET',
        dataType: 'json'
    }).done(function(response) {
 
        var fontello_json_icons = [];
 
        $.each(response.glyphs, function(i, v) {
            fontello_json_icons.push( v.css );
        });
 
        font_element.setIcons(fontello_json_icons);
    }).fail(function() {
        console.error('字体图标配置加载失败');
    });

        });

    </script>
{% endblock %}

{% block page %}

    <div class="card">
     <div class="card-body"> 
        <div class="row">
            <div class="col-md-12">
                <div class="card card-default">
                    <!-- /.box-header -->
                        <form method="POST" action="{{ path('admin_api_menu_edit', {"id":detail.id}) }}" class="form-horizontal ajaxform  needs-validation" accept-charset="UTF-8" novalidate>
                            <div class="card-body" style="display: block;">
                            <div class="form-group row">
                                <label class="col-sm-2 require col-form-label">父级菜单</label>
                                <div class="col-sm-8">
                                    <input type="hidden" name="parentIdSelect" value="{{ detail.pid }}"/>
                                    <select class="form-control form-control-sm select2" style="width: 100%;" name="parent_id" data-value="" >
                                        <option value="0">/</option>
                                        {% if menuSelect %}
                                            {% for menus in menuSelect %}
                                                <option value="{{ menus.id }}">{{ menus.name|raw }}</option>
                                            {% endfor %}
                                        {% endif %}
                                    </select>
                                </div>
                            </div>

                            <div class="form-group  row">
                                <label for="title" class="col-sm-2  require col-form-label">标题</label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="mdi mdi-file-document-edit fa-fw"></i></span>
                                        </div>
                                        <input type="text" id="title" name="title" data-required="1" value="{{ detail.name }}" class="form-control form-control-sm title" placeholder="输入标题" >
                                    </div>
                                </div>
                            </div>
                            <div class="form-group  row">
                                <label for="sort" class="col-sm-2  require col-form-label">排序</label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="mdi mdi-sort-descending"></i></span>
                                        </div>
                                        <input type="text" id="sort" name="sort" data-required="1" value="{{ detail.sort }}" class="form-control form-control-sm" >
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="icon" class="col-sm-2 control-label">图标</label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <input style="width: 140px" type="text" id="icon" name="icon" value="{{ detail.style }}"
                                               class="form-control form-control-sm icon"
                                               placeholder="输入图标"
                                        >
                                    </div>
                                    <span class="help-block">
                                        <i class="mdi mdi-information"></i>
                                        &nbsp;更多图标请查看 <a href="https://materialdesignicons.com/" target="_blank">https://materialdesignicons.com/</a>
                                    </span>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 require col-form-label">路径</label>
                                <div class="col-sm-8">
                                    <input type="hidden" name="uriSelect" value="{{ detail.url }}"/>
                                    <select class="form-control form-control-sm select2" style="width: 100%;" name="uri" data-value="" >
                                        {% if adminRoute %}
                                            {% for r in adminRoute %}
                                                <option value="{{ r }}">{{ r }}</option>
                                            {% endfor %}
                                        {% endif %}
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">显示到导航?</label>
                                <div class="col-sm-8">
                                    <input type="checkbox" name="isShow" {% if detail.isShow %}checked {% endif %} data-bootstrap-switch data-off-color="danger" data-on-color="success">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">锁定?</label>
                                <div class="col-sm-8">
                                    <input type="checkbox" name="isLock" {% if detail.isLock %}checked {% endif %} data-bootstrap-switch data-off-color="danger" data-on-color="success">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">仅权限?</label>
                                <div class="col-sm-8">
                                    <input type="checkbox" name="isAccess" {% if detail.isAccess %}checked {% endif %}  data-bootstrap-switch data-off-color="danger" data-on-color="success">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">描述</label>
                                <div class="col-sm-8">
                                    <textarea class="form-control form-control-sm" name="descr" rows="3" placeholder="输入 ...">{{ detail.descr }}</textarea>
                                </div>
                            </div>

                            <!-- /.box-body -->
                            </div>
                            <div class="card-footer">
                                <div class="col-md-2"></div>
                                <div class="col-md-8">
                                    <div class="btn-group">
                                        <button type="submit" class="btn btn-sm btn-info"><i class="mdi mdi-arrow-up"></i> 提交</button>
                                    </div>
                                </div>
                            </div>
                        </form>


                    <!-- /.box-body -->
                </div>
            </div>
        </div>
      </div>
    </div>
{% endblock %}
